<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript">

            $(function () {

                //绑定输入框点击事件
                $("#selectCity").click(function (){

                    var cityDiv = $("#cities");

                    //点击显示所有城市复选框
                    if(cityDiv.is(":hidden")){
                        cityDiv.show();
                    }else{
                        cityDiv.hide();
                    }

                });

                //绑定选择城市的确定按钮事件
                $("#ensure").on("click",function (){

                    var toWriteCity = "";

                    //获取所有名字为 city 且被选择的复选框
                    var city = $("[name='city']:checked");

                    //遍历这些复选项，把内容拼接
                    city.each(function (){
                        toWriteCity += ($(this).val()+"+");
                    })

                    //把拼接好的内容去掉最后一个加号，然后写入文本框
                    $("#selectCity").val(toWriteCity.substring(0,toWriteCity.lastIndexOf("+")));
                })

            });
        </script>
    </head>
    <body>

        <center>
            选择城市：<input type="text" id="selectCity" style="width: 500px"/>
            <br/><br/><br/>
            <div id="cities" hidden>
                <input type="checkbox" name="city" value="北京">北京
                <input type="checkbox" name="city" value="上海">上海
                <input type="checkbox" name="city" value="南京">南京
                <input type="checkbox" name="city" value="广州">广州
                <input type="checkbox" name="city" value="深圳">深圳
                <input type="checkbox" name="city" value="杭州">杭州
                <input type="checkbox" name="city" value="哈尔滨">哈尔滨
                <input type="checkbox" name="city" value="重庆">重庆
                <input type="checkbox" name="city" value="成都">成都
                <input type="checkbox" name="city" value="新疆">新疆
                <br/><br/><br/><input type="button" id="ensure" value="确定"/>
            </div>
        </center>


    </body>
</html>